<template>
  <div class="list">
    <Vue3SeamlessScroll :step="0.5" :wheel="true" :hover="true" :list="list" class="tableBody">
      <div class="listItem" v-for="(item,index) in list" :key="index">
        <item>
          <div class="itemBodyInfo">
            <div class="itemBodyInfoTop">
              <div class="date">{{ item.date }}</div>
              <div class="status">
                <level :level="item.level"></level>
              </div>
            </div>
            <div class="itemBodyInfo2">
              <div class="address">
                <i class="icon iconfont icon-address"></i>
                {{ item.address }}
              </div>
              <div class="user">
                <i class="icon iconfont icon-user"></i>
                负责人:{{ item.user }}
              </div>
            </div>
            <div class="itemBodyInfo3">
              <div class="desc">
                <i class="icon iconfont icon-bianjiwenjian"></i>事件:
                {{ item.description }}
              </div>
            </div>
          </div>
        </item>
      </div>
    </Vue3SeamlessScroll>
  </div>
</template>

<script>
import item from './item/index.vue'
import {alertList} from "../../../../api/api/LargeScreenData.js";
import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
import level from "./level/index.vue";

export default {
  name: "title",
  data() {
    return {
      list: []
    }
  },
  components: {item, level, Vue3SeamlessScroll},
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      try {
        const res = await alertList();
        this.list = res.data;
      } catch (err) {
        console.error(err);
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.list {
  width: calc(100% - 0px);
  position: relative;
  height: 100%;
  overflow: hidden;
}

.tableBody {
  position: relative;
  height: calc(100% - 20px);
  margin-top: 10px;
  overflow: hidden;
  width: 100%;

  .listItem {
    width: calc(100% - 20px);
    margin: auto;
    height: 130px;
    margin-bottom: 10px;
  }

  .itemBodyInfo {
    position: relative;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    height: 100%;

    .icon {
      color: #0aecfb;
    }

    .itemBodyInfoTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      height: 30px;
      margin-top: 20px;

      .date {
        color: #33b9f4;
        font-size: 14px;
        margin-left: 0px;
      }

      .status {
        margin-right: 0px;
      }
    }

    .itemBodyInfo2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      height: 30px;

      .address {
        color: #9ad2ff;
        font-size: 14px;
      }

      .user {
        color: #9ad2ff;
        font-size: 14px;
      }
    }

    .itemBodyInfo3 {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      .icon {
        margin-right: 3px;
      }

      .desc {
        color: #9ad2ff;
        font-size: 14px;
      }

    }
  }
}
</style>
